<template>
	<section>
		<div class="head-wrap">
			<user-info></user-info>
			<div class="work-num">
				<ul>
					<li>
						<p class="keynote">{{workInfo?.zan_num || 0}}</p>
						<span>点赞数</span>
					</li>
					
					<li>
						<p class="keynote">{{workInfo?.collect_num || 0}}</p>
						<span>收藏数</span>
					</li>
			
					<li>
						<p class="keynote">{{workInfo?.download_num || 0}}</p>
						<span>下载数</span>
					</li>
				</ul>
			</div>
			<personal-bar></personal-bar>
		</div>
		
		<div class="title-wrap">
			<span class="title">我的作品</span>
			<div @click="toCreate">
				去创作
			</div>
		</div>
		<div class="info">
			<div class="sub work">
				<img src="@/assets/img/create.png">
				<div>
					<p>{{workInfo?.total || 0}}</p>
					<span>创作数</span>
				</div>
			</div>
			
			<div class="sub boutique">
				<img src="@/assets/img/class.png">
				<div>
					<p>{{workInfo?.school_total || 0}}</p>
					<span>校级优秀</span>
				</div>
			</div>
			
			<div class="sub group">
				<img src="@/assets/img/school.png">
				<div>
					<p>{{workInfo?.class_total || 0}}</p>
					<span>班级优秀</span>
				</div>
			</div>
		</div>
	
		<ul class="model-wrap">
			<li v-for="(item, index) in modelList" :key="item.id" class="model-list">
				<div class="content" @mouseover="showDelete(item)" @mouseleave="hideDelete(item)" @click="toDetail(item)">
					<img :src='staticURL+item.thumbnail_url' v-if='item.thumbnail_url' class='bg_logo'/>
					<img src="@/assets/img/defaultBg.png" class='bg_logo' v-else/>
					
					<div class="content-bottom">
						<span class='submit' v-if='item.status == 1'>耐心等待老师点评...</span>
						<!-- <span class='edit' v-if='item.status == 2'>重新修改</span> -->
						<span class='look' v-if='item.status == 2' @click.stop="lookComment(item)">查看点评</span>
					</div>
					
					<div class="content-middle">
						<div class="status">
							<span class="unsubmit" v-if='item.status == 1'>待点评</span>
							<!-- <span class="comment" v-if='item.status == 2'>点评中</span> -->
							<span class="commented" v-if='item.status == 2'>已点评</span>
						</div>
						<p class="name">{{item.name}}</p>
					</div>
					<div class="delete-wrap" v-if='item.isShowDelate'>
						<i class="el-icon-delete" @click.stop="submitDelete(item)"></i>
					</div>
				</div>
			</li>
		</ul>
		
		<common-pagination v-if='total > 10' :total="total" :size="searchData.size" @size-change="handelPagesizeChange" @page-change="handlePageChange"></common-pagination>
		<look-comment-dialog v-if="isLookComment" :model_id="model_id" @close="close"></look-comment-dialog>
		<model-render v-if="isShowModel" :model_id="model_id" @close="close"></model-render>
	</section>
</template>

<script>
	import utils from '@/assets/js/utils';
	import PersonalBar from '@/components/PersonalBar';
	import ModelRender from '@/views/model/components/modelRender';
	import CommonPagination from '@/components/CommonPagination';
	import LookCommentDialog from './lookCommentDialog';
	import UserInfo from './userInfo';
	import {workList} from '@/api/personal.js';
	import {getModelDetail,modelDelete} from '@/api/model.js';
	export default {
		components: {
			CommonPagination,
			LookCommentDialog,
			ModelRender,
			UserInfo,
			PersonalBar
		},
		data() {
			return {
				modelList:[],
				workInfo:{},
				model_id:"",
				isLookComment: false,
				isShowModel:false,
				total: 0,
				searchData: {
					page: 1,
					size: 10
				},
				realname:"",
				headimg:"",
				createTime:""
			};
		},

		created() {
			this.realname = utils.getSession('realname');
			this.headimg = utils.getSession('headimg');
			this.createTime = utils.getSession('createTime');
			this.getWorkList();
		},

		methods: {
			async getWorkList() {
				const {
					data,
					status
				} = await workList(this.searchData);
				if (status !== 200) return;
				if(data.code == 200){
					this.workInfo = data?.data || {};
					this.modelList = data?.data?.list || [];
					this.total = data?.data?.total || 0
				}
				else{
					this.modelList = [];
					this.total = 0
					this.$message.warning(data && data.message || '获取失败');
				}
			},

			handelPagesizeChange(size) {
				this.searchData.size = size;
				this.getWorkList();
			},

			handlePageChange(page) {
				this.searchData.page = page;
				this.getWorkList();
			},
			
			toCreate(){
				this.$router.push({
					path:"./create-model"
				})
			},
			
			close() {
				this.isShowModel = false;
				this.isLookComment = false;
			},

			toDetail(item) {
				this.model_id = item.id;
				this.isShowModel = true;
			},
			
			//查看点评
			lookComment(item){
				this.model_id = item.id;
				this.isLookComment = true;
			},
			
			showDelete(item){
				if(item.level == 1){
					this.$set(item,"isShowDelate",true)
				}
			},
			
			hideDelete(item){
				this.$set(item,"isShowDelate",false)
			},
			
			async submitDelete(item){
				const obj = {
					model_id: item.id,
				};
				const {
					data,
					status
				} = await modelDelete(obj);
				if (status !== 200) return;
				if(data.code == 200){
					this.getWorkList();
					this.$message.success("删除成功");
				}
				else{
					this.$message.warning("删除失败");
				}	
			}
		}
	};
</script>

<style lang="scss" scoped>
	.head-wrap{
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 30px;
		.work-num{
			ul{
				margin-left: 20px;
				border-left: 1px solid  #CFDDE1;
				@include flex-row;
				li{
					margin-left: 26px;
					text-align: center;
					p{
						margin-bottom: 10px;
						font-size: 18px;
						color: #333333;
						font-weight: bold;
					}
					span{
						font-size: 14px;
						color: #999999;
					}
				}
			}
		}
	}
	.title-wrap{
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 16px;
		.title{
			font-weight: bold;
			font-size: 18px;
			color: #000000;
		}
		div{
			@include cursor-style;
			padding: 6px 8px 6px 28px;
			background: url("../../../assets/img/score.png") no-repeat 10px center;
			background-size: 16px;
			border-radius: 5px 5px 5px 5px;
			border: 2px solid #FF8A00;
			font-weight: 500;
			font-size: 14px;
			color: #FF8A00;
		}
	}
	
	.info{
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 15px;
		.sub{
			width: 33%;
			height: 100px;
			@include flex-row;
			justify-content: center;
			border-radius: 10px 10px 10px 10px;
			img{
				display: block;
				width: 62px;
				height: 62px;
				margin-right: 40px;
			}
			div{
				@include flex-row;
				flex-direction: column;
				justify-content: space-between;
				span{
					font-size: 14px;
					color: #6C7B8A;
				}
				p{
					font-weight: bold;
					font-size: 30px;
				}
			}
		}
		.work{
			background: #E0F0FF;
			p{
				color: #0AB7FF;
			}
			
		}
		.boutique{
			background: #FFEEEE;
			p{
				color: #FF4747;
			}
		}
		.group{
			background: #F9EEFF;
			p{
				color: #B252FF;
			}
		}
		.total{
			background: #EEFFF9;
			p{
				color: #42D58F;
			}
		}
	}
	.model-wrap{
		display: flex;
		flex-wrap: wrap;
		.model-list{
			width: 20%;
			margin-bottom: 30px;
			.content{
				position: relative;
				width: 90%;
				height: 100%;
				.bg_logo{
					display: block;
					width: 100%;
					height: 322px;
					border-radius: 10px 10px 0px 0px;
				}
				.content-middle{
					z-index: 9;
					position: absolute;
					top:0;
					left: 0;
					right: 0;
					width: 100%;
					height: 322px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 20px 26px;
					box-sizing: border-box;
					border-radius: 10px 10px 0px 0px;
					cursor: pointer;
					background: rgba(0, 0, 0, 0.6);
					color: #fff;
					.status{
						@include flex-row;
						justify-content: flex-end;
						span{
							padding: 5px 10px;
							background: #FF8A00;
							border-radius: 5px 5px 5px 5px;
							font-size: 12px;
							color: #FFFFFF;
						}
						.unsubmit{
							background-color: #FF8A00;
						}
						.comment{
							background-color: #36DA9F;
						}
						.commented{
							background-color: #999999;
						}
					}
					.name{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-weight: 400;
						font-size: 14px;
						color: #FFFFFF;
					}
				}
				.content-bottom{
					height: 46px;
					line-height: 46px;
					text-align: center;
					span{
						border-radius: 0px 0px 10px 10px;
						display: block;
						font-size: 16px;
						color: #FFFFFF;
						
					}
					.submit{
						background: #FF8A00;
					}
					.edit{
						background: #FFC267;
					}
					.look{
						background: #FFC267;
						@include cursor-style;
					}
				}
				.delete-wrap{
					z-index: 10;
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					right: 0;
					top: 0;
					background: rgba(0, 0, 0, 0.1);
					display: flex;
					align-items: center;
					justify-content: center;
					i{
						font-size:36px;
						cursor: pointer;
						color:#fff
					}
				}
			}
		}
	}
</style>
